<template>
  <div 
    flex="main:left"
    style="display:flex; justify-content:flex-start;"
  >
    <el-image class="img" :src="item.courseThumb"></el-image>
    <div class="warp" 
      flex="dir:top main:justify" 
      style="display: flex; flex-direction: column; justify-content:space-between; "
    >
      <p class="font-title">
        {{ item.courseName }} <span class="font-second">共 {{ item.lessonCount }} 课时</span>
      </p>
      <p class="font-text">
        已完成 {{ item.homeworkFinishCount }} 课时作业，还有 <span class="font-waring">{{
          item.homeworkCount - item.homeworkFinishCount
        }}</span>
        课时
      </p>
      <el-progress :percentage="percentage" :show-text="false" :color="customColors"></el-progress>
      <div>
        <el-button class="btn" round @click.native="detail">查看作业</el-button>
      </div>
    </div>
  </div>
</template>

<script lang="ts" >

import router from '/@/router';

export default {
  props: {
    item: Object,
  },
  computed: {
    percentage(){
        return this.item.homeworkFinishCount/this.item.homeworkCount * 100
    }
  },
  data(){
    return {
        
    }
  },
  methods:{
    customColors(percentage) {
      if (percentage < 50) {
        return '#ffaa23';
      } else if (percentage <= 100) {
        return '#f29005';
      }
    },
    detail:function(){
        router.push({ name:'userCenter-homeworkDetail',query:{courseId:this.item.courseId}})
    }
  }
};

</script>

<style lang="scss" scoped>
.warp {
  width: 614px;
  margin-left: 26px;
}
.img {
  width: 300px;
  height: 160px;
  border-radius: 6px;
}
.font-second {
  font-size: 14px;
  color: #808080;
  margin-left:20px;
}
.font-text {
  font-size: 16px;
  color: #808080;
}
.font-title {
  font-size: 20px;
}
.font-waring {
  font-size: 16px;
  color: #ff5f19;
}
.btn {
  display: block;
  background: #ff5f19;
  color: #ffffff;
 margin-left:auto
}
</style>